<template>
  <div class="tj-box1">
    <div class="title">
      <img src="@/assets/home-tj-icon.png" alt="" />
      <p>取保金额统计</p>
    </div>

    <div class="tab">
      <p class="on">缴费</p>
      <p>退费</p>
      <p>罚没</p>
    </div>

    <div class="charts" ref="line"></div>
  </div>
</template>
  <script setup lang="ts">
</script><script setup lang="ts">
import { reactive, watch, ref, onMounted } from "vue";
import * as echarts from "echarts";

//获取图形图标的节点
let line = ref();
onMounted(() => {
  let mycharts = echarts.init(line.value);
  //设置配置项
  mycharts.setOption({
    title: {
      subtext: "金额/元",
    },
    tooltip: {
      trigger: "axis",
    },
    grid: {
      left: 40,
      top: 50,
      right: 20,
      bottom: 20,
    },
    xAxis: [
      {
        type: "category",
        boundaryGap: false,
        data: ["06/8", "06/8", "06/8", "06/8", "06/8", "06/8", "06/8"],
      },
    ],
    yAxis: [
      {
        type: "value",
      },
    ],
    series: [
      {
        name: "预购",
        type: "line",
        smooth: true,
        data: [500, 300, 400, 600, 260, 830, 710],
        itemStyle: {
          normal: {
            color: "#7579E7",
            lineStyle: {
              width: 6, // 设置线条粗细为3像素
            },
          },
        },
        areaStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#d4d5ee", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#ffffff", // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        },
      },
    ],
  });
});
</script>
  <style scoped lang="scss">
.tj-box1 {
  padding: 20px 25px;
  background: #fff;
  border-radius: 8px;
  height: auto;
  margin: 30px 0;
  box-shadow: 2px 2px 5px 5px rgba(147, 147, 147, 0.102);
  .title {
    display: flex;
    align-items: center;
    img {
      width: 26px;
      height: 26px;
    }
    p {
      margin-left: 10px;
      font-size: 16px;
      color: #3d3d3d;
    }
  }
  .tab {
    display: inline-block;
    margin-top: 24px;
    height: 30px;
    line-height: 30px;
    border: 1px solid #dbdbdb;
    border-radius: 8px;
    text-align: center;
    font-size: 14px;
    color: #3290f7;
    margin-bottom: 20px;
    p {
      display: inline-block;
      width: 80px;
      cursor: pointer;
      &.on {
        background: #3290f7;
        border-radius: 8px;
        color: #fff;
      }
    }
  }
  .charts {
    height: 300px;
  }
}
</style>
  